import { React, useEffect, useState } from "react";

import './index.css'

// 1️⃣准备覆盖物经纬度坐标位置
const opts = {
    // position 其实是覆盖物左上角的坐标
    position: new BMapGL.Point(116.2787, 40.0492), // 指定文本标注所在的地理位置
    offset: new BMapGL.Size(-100, -25) // 设置文本偏移量
};
// 2️⃣创建文本标注对象
const label = new BMapGL.Label('欢迎来到王者荣耀', opts);
// 3️⃣自定义文本标注样式
label.setStyle({
    color: 'red',
    borderRadius: '5px',
    borderColor: '#ccc',
    textAlign: 'center',
    padding: '10px',
    fontSize: '16px',
    width: '200px',
    height: '50px',
    lineHeight: '50px',
    fontFamily: '微软雅黑'
});


// console.log("获取位置信息：", navigator.geolocation.getCurrentPosition());
navigator.geolocation.getCurrentPosition((position) => {
    console.log(position);
}, function (err) {
    console.log(err);
}, {
    enableHighAcuracy: true, //位置是否精确获取
    timeout: 5000,//获取位置允许的最长时间
    maximumAge: 0 //多久更新获取一次位置
})

const Map = () => {
    useEffect(() => {
        var map = new BMapGL.Map("container");          // 创建地图实例 
        var point = new BMapGL.Point(116.2787, 40.0492);  // 创建点坐标 
        map.centerAndZoom(point, 15);
        map.addControl(new BMapGL.ScaleControl())
        map.addControl(new BMapGL.ZoomControl())
        map.addControl(new BMapGL.LocationControl())

        // 4️⃣把覆盖物添加到地图中
        map.addOverlay(label);
        console.log(map);
    })
    return (
        <div className="map">
            <div id='container' />
            地图组件
        </div>
    )
}



export default Map